<template>
    <div :class="['item-card', { 'active_bg': currId == item_ls.rel_id }]">
        <div class="item-card-content flex_row">
            <div class="flex_center rel_avatar" :style="{ height: imgH + 'px', width: imgW + 'px' }">
                <el-image v-if="item_ls.rel_img" class="rel_img" :src="item_ls.rel_img" :width="100" :height="100" />
                <div v-else class="flex_center rel_avatar_box" :style="{ height: imgH + 'px', width: imgW + 'px' }"
                    :title="item_ls.rel_name">
                    <span class="font_size20 bold font_black8"> {{ item_ls.rel_name ? item_ls.rel_name.charAt(0) : '--'
                    }} </span>
                </div>
            </div>
            <div class="flex1">
                <div class="rel_name flex_row">
                    <span class="font_size16 bold"> {{ item_ls.rel_name || '--' }} </span>
                    <span class="font_size12 font_black8 ml5" v-if="item_ls.rel_id"> </span>
                    <slot name="rel_name_right"></slot>
                </div>
                <slot name="rel_name_bottom"></slot>
                <div class="flex_between">
                    <div class="rel_cell">
                        <span class="font_black8 font_size14">销售额: </span>
                        <span class="font_size16 font_bule" style="margin-left: 2px;">{{ item_ls.amount || '--' }}</span>
                    </div>
                    <div class="rel_cell">
                        <span class="font_black8 font_size14">毛利: </span>
                        <span :class="['font_size16', item_ls.profit > 0 ? 'font_green' : 'font_red']" style="margin-left: 2px;">{{ item_ls.profit || '--' }}</span>
                    </div>
                </div>
                <div class="flex_between">
                    <div class="rel_cell">
                        <span class="font_black8 font_size14">销量: </span>
                        <span class="font_size16" style="margin-left: 2px;">{{ item_ls.number || '--' }} </span>
                    </div>
                    <div class="rel_cell">
                        <span class="font_black8 font_size14">单数: </span>
                        <span class="font_size16" style="margin-left: 2px;">{{ item_ls.num_od || '--' }} </span>
                    </div>
                </div>
            </div>
        </div>
        <img v-if="currId == item_ls.rel_id" class="selete_img" src="static/icon/select.svg" alt="">
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps, defineEmits, defineExpose, onUnmounted, onBeforeUnmount } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()

const props = defineProps({
    item_ls: {
        type: Object,
        default: () => {}
    },
    tab: {
        type: Object,
        default: () => { }
    },
    imgH: {
        type: [String, Number],
        default: 72
    },
    imgW: {
        type: [String, Number],
        default: 72
    },
    currentId: {
        type: [String, Number],
        default: ''
    }
})
const currId = ref(props.currentId)
watch(() => props.currentId, (newVal) => {
    if (newVal) {
        currId.value = newVal
    }
}, { deep: true })

// const emit = defineEmits(['cardsClick'])
// const cardsClick = () => {
//     emit('cardsClick', props.item_ls)
// }

onMounted(() => {
})


</script>

<style lang="scss" scoped>
.item-card {
    padding: 6px;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.rel_avatar {
    border-radius: 8px;
    margin-right: 14px;

    .rel_img {
        height: 100%;
        width: 100%;
        max-width: 72px;
        max-height: 72px;
        border-radius: 4px;
    }

    .rel_avatar_box {
        background: #ebf0f9;
        border-radius: 8px;
    }
}

.rel_cell {
    width: 50%;
}

.active_bg {
    border-color: #3388ff;
    background: rgba(51, 136, 255, 0.05) !important;
    .selete_img{
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
    }
}
</style>